@import 'variable.scss';

.header {
	min-width: 1200px;
	height: 72px;
  box-shadow: 0 5px 5px #ddd;
  background-color: #fff;

  .header-logo {
  	display: inline-block;
		width: 288px;
		height: 72px;
		padding: 8px;
		
		.logo-lk {
			display: block;
			height: 100%;
			background-image: url(../img/logo.png);
			background-repeat:  no-repeat;
		  background-size: 224px 56px;
		}
	}

	.header-nav {
		display: inline-block;

		.nav-list {
			.nav-item {
				float: left;
				height: 72px;
				padding-left: 70px;
				line-height: 72px;
				font-size: 18px;

				.nav-lk {
					position: relative;
					transition: color .3s;

					&::after {
						position: absolute;
						left: 0;
						bottom: -8px;
						content: "";
						display: block;
						width: 0;
						height: 2px;
						background-color: $defaultColor;
						transition: width .3s;
					}

					&:hover {
						color: $defaultColor;

						&::after {
							width: 100%;
						}
					}
				}
			}
		}
	}

	.header-search {
		float: right;
		position: relative;
		width: 240px;
		height: 40px;
		margin: 16px 15px 0 0;
    
    .input-search {
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 200px;
    	height: 40px;
    	text-indent: 10px;
    }

    .btn-search {
    	position: absolute;
    	top: 0;
    	right: 0;
    	width: 40px;
    	height: 40px;
    }
	}
}





